<template>
    <uni-popup ref="popupRef" type="center" >
        <view class="bg-white rounded-md w-[600rpx] font-sans pt-3 overflow-hidden">
            <view class="m-3">
                <slot name="title"></slot>
            </view>
            <view class="m-3">
                <slot name="content"></slot>
            </view>
            <view class="w-full flex flex-row justify-around h-[80rpx] items-center ll-x-divider">
                <view class="h-full flex-1 flex justify-center items-center   active:bg-disabled">
                    <text @click="close" class="text-gray-600">取消</text>
                </view>
                <view class="h-full flex-1 flex justify-center items-center  active:bg-disabled">
                    <text @click="confirm" class="text-primary text-xl">确定</text>
                </view>
            </view>
        </view>
    </uni-popup>
</template>

<script lang="ts" setup>
import type { UniPopup } from "@uni-helper/uni-types"
defineOptions({
    name: "ModalPopup",
})
const popupRef = ref<UniPopup>()
interface IProps {
    isShow: boolean
}
const props = withDefaults(defineProps<IProps>(), { isShow: false })
interface IEmit {
    (e: "confirm"): () => void
    (e: "close"): () => void
    (e: "update:isShow", isShow: boolean): () => void
}
const emits = defineEmits<IEmit>()
function confirm() {
    emits('confirm')
}
function close() {
    emits('close')
    emits("update:isShow", false)
}
watchEffect(() => {
    if (props.isShow) {
        console.log("打开");
        popupRef.value?.open()
    } else {
        popupRef.value?.close()
    }
})
</script>

<style lang="scss" scoped>
.text-primary {
    color: var(--color-primary, #d3a5ff);
    /* 使用自定义颜色变量 */
}

.active-bg-disabled {
    background-color: var(--color-disabled, #c8c9cc);
    /* 使用自定义颜色变量 */
}

.bg-light {
    background-color: var(--color-light, #e5e5e5);
    /* 使用自定义颜色变量 */
}
</style>